<!--
 * @Author: panda
 * @Date: 2022-05-18 10:40
 * @Description: 视频详情页 TODO
-->
<template>
  <div class="home">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="3" />
          <el-col :span="18">
            <div id="mse"></div>
            <el-space direction="vertical" alignment="left">
              <h1 style="font-size: 30px">{{ video.title }}</h1>
              <div>
                <span>{{ video.views }} 次观看</span>&ensp; · &ensp;
                <span>发布于 {{ video.createTime }}</span
                >&ensp; · &ensp;
                <span>{{ video.copyright }}</span>
              </div>
              <span style="margin-bottom: 20px">{{ video.detail }}</span>
              <el-space alignment="" @click="toHomePage">
                <el-avatar :src="video.avatar" />
                <h1>{{ video.username }}</h1>
              </el-space>
            </el-space>
            <Comment />
          </el-col>
          <!-- <el-col :span="5">
            <div style="width: 100%; height: 100%; background-color: #2c3e50"></div>
          </el-col> -->
          <el-col :span="3" />
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import Player from "xgplayer";
import { useRoute } from "vue-router";
import { videoApi } from "@/api/video";
import { Comment } from "@/components/comment";
import { Video } from "@/api/model/video";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "VideoDetail",
  components: { Comment },
  setup() {
    const route = useRoute()
    const videoModel = reactive(new Video())
    const router = useRouter()
    // 路由跳转用户主页
    const toHomePage = () => {
      const routeOne = router.resolve({
        path: '/user/' + videoModel.video.createBy,
      })
      window.open(routeOne.href, '_blank')
    }

    onMounted(() => {
      videoApi
        .getVideoDetail({ id: route.params.id as unknown as number })
        .then((res) => {
          const { data } = res.data;
          console.log(data);
          videoModel.video = data;
          new Player({
            id: "mse",
            autoplay: false,
            fluid: true,
            url: data.videoUrl,
            poster: data.cover,
            playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
            thumbnail: {
              pic_num: 44,
              width: 160,
              height: 90,
              col: 10,
              row: 10,
              urls: [data.cover],
            },
            controlPlugins: [],
            danmu: {
              panel: true,
              comments: [
                //弹幕数组
                {
                  duration: data.duration, //弹幕持续显示时间,毫秒(最低为5000毫秒)
                  id: "1", //弹幕id，需唯一
                  start: 3000, //弹幕出现时间，毫秒
                  prior: true, //该条弹幕优先显示，默认false
                  color: true, //该条弹幕为彩色弹幕，默认false
                  txt: "长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕", //弹幕文字内容
                  style: {
                    //弹幕自定义样式
                    color: "#ff9500",
                    fontSize: "20px",
                    border: "solid 1px #ff9500",
                    borderRadius: "50px",
                    padding: "5px 11px",
                    backgroundColor: "rgba(255, 255, 255, 0.1)",
                  },
                  mode: "top", //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
                  // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt
                  // eventListeners: [{ //支持自定义DOM设置DOM监听事件
                  //   event: 'click',
                  //   listener: function (e) {
                  //     console.log('click')
                  //   },
                  //   useCapture: false,
                  // }]
                },
              ],
              area: {
                //弹幕显示区域
                start: 0, //区域顶部到播放器顶部所占播放器高度的比例
                end: 1, //区域底部到播放器顶部所占播放器高度的比例
              },
              closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
              defaultOff: true, //开启此项后弹幕不会初始化，默认初始化弹幕
            },
            miniplayer: true,
            miniplayerConfig: {
              bottom: 200,
              right: 0,
              width: 320,
              height: 180,
            },
          });
        })
        .catch();
    });
    return {
      ...toRefs(videoModel), toHomePage
    }
  }
})
</script>

<style scoped>
#mse {
  /*flex: auto;*/
}

.home {
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
</style>
